<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-04-28 14:10:25
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-04-29 16:26:56
-->
<template>
  <div>
    <el-dialog
      title="新建日程"
      :visible.sync="dialog.newScheduleShow"
      width="30%"
      @close="scheduleClose"
    >
      <el-form
        :model="scheduleForm"
        ref="scheduleForm"
        :rules="scheduleRules"
        label-position="top"
      >
        <el-form-item label="日程内容" prop="content">
          <el-input
            v-model="scheduleForm.content"
            placeholder="请输入日程内容"
            type="textarea"
            :rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item label="日程类型" prop="type">
          <el-select
            v-model="scheduleForm.type"
            style="width: 330px"
            placeholder="请选择日程类型"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="scheduleForm.startTime"
            type="datetime"
            style="width: 330px"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="finishTime">
          <el-date-picker
            v-model="scheduleForm.finishTime"
            type="datetime"
            style="width: 330px"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="参与人员" prop="userIds">
          <el-select
            v-model="scheduleForm.userIds"
            style="width: 330px"
            multiple
            collapse-tags
            placeholder="请选择参加人员"
          >
            <el-option
              v-for="item in chargerOptions"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="dialog.newScheduleShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { distriBution } from "@/api/registration";
import { insertCal, updateCal } from "@/api/calendar";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      scheduleForm: {
        id: null,
        content: "",
        type: 1,
        startTime: "",
        finishTime: "",
        userIds: "",
      },
      chargerOptions: [],
      scheduleRules: {
        content: [
          {
            required: true,
            message: "请输入日程内容",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择开会类型",
            trigger: "change",
          },
        ],
        startTime: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: "change",
          },
        ],
        finishTime: [
          {
            required: true,
            message: "请选择结束时间",
            trigger: "change",
          },
        ],
        userIds: [
          {
            required: true,
            message: "请选择参与人员",
            trigger: "blur",
          },
        ],
      },
      typeOptions: [
        {
          value: 1,
          label: "开会",
        },
      ],
    };
  },
  created() {
    this.getChargeList();
  },
  methods: {
    //获取负责人
    getChargeList() {
      distriBution().then((res) => {
        this.chargerOptions = res.data;
      });
    },
    //   关闭新建日程
    scheduleClose() {
      this.dialog.newScheduleShowEject = false;
    },
    // 确认提交日程
    onSubmit() {
      this.$refs["scheduleForm"].validate((valid) => {
        if (!valid) return;
        if (this.scheduleForm.id == null) {
          insertCal(this.scheduleForm).then((res) => {
            this.$message.success(res.msg);
            this.$parent.getList();
            this.dialog.newScheduleShow = false;
          });
        } else {
          updateCal(this.scheduleForm).then((res) => {
            this.$message.success(res.msg);
            this.$parent.getList();
            this.dialog.newScheduleShow = false;
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>